import React from 'react';
import { useEffect, useLayoutEffect, useState } from 'react'
// 当使用useEffect
// useEffect  当浏览器渲染完毕后, 再执行useEffect , 所以先渲染石猴, 然后等循环结束, 再执行修改操作
// 这样页面数据又变成了 六耳猕猴, 中间又一个变化的效果
// 执行顺序 :为121

// useLayoutEffect
// 相同点: 与useEffect 使用语法完全相同也有4种写法
// 不同点: useLayoutEffect是同步的, 执行时间是在浏览器渲染界面之前执行,页面第一次还没有渲染石猴, 接下来
// 就执行useLoutEffect, 数据被修改为 六耳猕猴, 然后执行完useLayoutEffect并渲染页面中就看到了最终的六耳猕猴,
// 就没有变化的过程
// useLayoutEffect 执行顺序: 121


// 面试题?useEffect 和 useLayoutEffect 区别?
// 执行时间: useEffect 是渲染之后执行, useLayoutEffect是渲染之前执行(和渲染同步执行)
// useEffect 为异步的,  useLayoutEffect是同步的.


const Father = () => {
    const [name, setName] = useState('石猴')
    useLayoutEffect(() => {
        for (let i = 0; i < 10000000; i++) {

        }
        console.log(2);
        setName('六耳猕猴')

    }, [])
    return (
        <div>
            {
                console.log(1)
            }
            <p>{name}</p>
        </div>
    );
}

export default Father;
